<template>
  <table-index :table="table">
    <template #table-summary>
      <div class="car-model-summary">
        <div class="car-model-summary-item">
          车型数量：<span class="car-model-summary-value">{{ carModelSummaryTotalModelNum }}</span>
        </div>
        <div class="car-model-summary-item">
          未配置车型数量：<span class="car-model-summary-value">{{ carModelSummaryNoModelNum }}</span>
        </div>
      </div>
    </template>
    <template #modelName="{ record }">
      <div class="model-name">{{ record.modelName }}</div>
      <div class="" v-if="!record.id" style="margin-top: 8px; color: #f53f3fff">
        <icon-exclamation-circle-fill style="color: #f53f3fff; margin-right: 2px" />需保存后生效
      </div>
    </template>
    <template #siteNameList="{ record }">
      <template v-if="record.siteNameList && record.siteNameList.length > 0">
        <more-popup :list="record.siteNameList" />
      </template>
    </template>
    <template #price="{ record }">
      <i-input-number v-model="record.price" unit="元/月" />
    </template>
    <template #poundageAmount="{ record }">
      <i-input-number v-model="record.poundageAmount" unit="元/次" />
    </template>
    <template #insuranceAmount="{ record }">
      <i-input-number v-model="record.insuranceAmount" unit="元/月" />
    </template>
    <template #carDeposit="{ record }">
      <i-input-number v-model="record.carDeposit" unit="元" />
    </template>
    <template #illegalDeposit="{ record }">
      <i-input-number v-model="record.illegalDeposit" unit="元" />
    </template>
  </table-index>
</template>

<script setup name="CarModelPriceFormSorder">
  import { inject, computed } from 'vue'
  import { isValid } from '@/utils'

  import { useTable } from '@/hooks/table'

  const form = inject('form')

  // 车型数量
  const carModelSummaryTotalModelNum = computed(() => {
    return table.dataList?.length || 0
  })
  // 未配置车型数量
  const carModelSummaryNoModelNum = computed(() => {
    let dataList = table.dataList || []
    return dataList.filter((item) => {
      return !isValid(item.price)
    }).length
  })

  // table 配置
  const table = useTable({
    pagination: false,
    tableLoading: false,
    columns: [
      { title: '车型', width: 160, dataIndex: 'modelName', slotName: 'modelName' },
      { title: '车辆数量', width: 120, dataIndex: 'carNumber' },
      { title: '应用门店', width: 180, dataIndex: 'siteNameList', slotName: 'siteNameList' },
      { title: '月租价', width: 180, dataIndex: 'price', slotName: 'price' },
      { title: '手续费', width: 180, dataIndex: 'poundageAmount', slotName: 'poundageAmount' },
      { title: '基础保险', width: 180, dataIndex: 'insuranceAmount', slotName: 'insuranceAmount' },
      { title: '租车押金', width: 180, dataIndex: 'carDeposit', slotName: 'carDeposit' },
      { title: '违章押金', width: 180, dataIndex: 'illegalDeposit', slotName: 'illegalDeposit' },
    ],
  })

  // 更新 tableList
  const updateTableList = (list) => {
    // 当前车型列表
    const tenantPriceModelList = form.tenantPriceModelList || []
    // 对接口返回的结果进行处理
    for (let i = 0; i < list.length; i++) {
      let item = list[i]
      // 如果当前车型已经存在，则将当前录入信息合并到 list>item 中，保证录入信息一直存在
      let currItem = tenantPriceModelList.find((nowDataItem) => nowDataItem.modelId == item.modelId)
      if (currItem) {
        // 将当前录入的车型价格回填
        Object.assign(item, {
          price: currItem.price,
          poundageAmount: currItem.poundageAmount,
          insuranceAmount: currItem.insuranceAmount,
          carDeposit: currItem.carDeposit,
          illegalDeposit: currItem.illegalDeposit,
        })
      } else {
        item.price = item.price ?? 0
        item.poundageAmount = item.poundageAmount ?? 0
        item.insuranceAmount = item.insuranceAmount ?? 0
        item.carDeposit = item.carDeposit ?? 0
        item.illegalDeposit = item.illegalDeposit ?? 0
      }
    }

    // 更新 form.tenantPriceModelList
    table.dataList = list
    form.tenantPriceModelList = list
  }

  defineExpose({
    updateTableList,
  })
</script>

<style lang="less" scoped>
  .car-model-summary {
    color: #4e5969;
    padding-top: 4px;
    .car-model-summary-item {
      display: inline-block;
    }
    .car-model-summary-item + .car-model-summary-item {
      margin-left: 56px;
    }
    .car-model-summary-value {
      color: var(--color-text-1);
    }
  }
</style>
